<template>
  <div class="app-container">
    <!-- 监控 -->
    <el-dialog
      id="JcDialog"
      :title="dialogVisibleTitle"
      :visible.sync="dialogVisible"
      width="900px"
      :before-close="handleClose"
    >
      <!-- 帮助引导 -->
      <guidance class="dialogBtn" title="" :list="monitorList" />

      <!-- 音乐组件 -->
      <dyAudio ref="dyAudio" />

      <div :key="showData.groupStatus" class="bdBody">
        <div class="bdBodyTop">
          <div class="bdBodyTopT flexBox" style="margin: 0">
            <div class="zyNode text-center">
              <img
                v-if="importantConfig.machineState == 1"
                src="../../../../assets/icons/nodeok.png"
                alt=""
              >
              <img
                v-else-if="importantConfig.machineState == 2"
                src="../../../../assets/icons/baozhang.png"
                alt=""
              >
              <img
                v-else-if="importantConfig.machineState == 3"
                src="../../../../assets/icons/zhihui.png"
                alt=""
              >
              <img
                v-else
                src="../../../../assets/icons/unsuccessful.png"
                alt=""
              >
              <div>
                <el-button
                  :key="flowChartIndex"
                  v-hasPermi="['console:group:editGroup']"
                  icon="el-icon-sort"
                  :type="importantConfig.machineState == 1 ? 'primary' : 'info'"
                  :disabled="importantConfig.machineState != 1"
                  @click="manualSwitchFn(false)"
                >切换保障节点</el-button>
              </div>
            </div>

            <div class="bdBodyTopTc">
              <div class="lineBox">
                <span ref="line" class="line" :class="lineClass" />
              </div>

              <!-- <el-button icon="el-icon-document-copy" v-if="importantConfig.machineState == '2' && guaranteeConfig.machineState == '1'" type="primary" @click='
							'>手动切换业务</el-button> -->

              <el-button
                icon="el-icon-document"
                type="primary"
                plain
                @click="showGroupLog"
              >监控日志
              </el-button>
              <!--
							<el-button icon="el-icon-sort" type="primary" plain v-hasPermi="['console:hessNode:edit']" :disabled="importantConfig.machineState != 2 && guaranteeConfig.machineState != 2"
							 @click="exchangeNodeTypeFn">交换节点</el-button> -->
            </div>

            <div class="bzNode text-center">
              <img
                v-if="guaranteeConfig.machineState == 1"
                src="../../../../assets/icons/nodeok.png"
                alt=""
              >
              <img
                v-else-if="guaranteeConfig.machineState == 2"
                src="../../../../assets/icons/baozhang.png"
                alt=""
              >
              <img
                v-else-if="guaranteeConfig.machineState == 3"
                src="../../../../assets/icons/zhihui.png"
                alt=""
              >
              <img
                v-else
                src="../../../../assets/icons/unsuccessful.png"
                alt=""
              >
              <div>
                <el-button
                  :key="flowChartIndex"
                  v-hasPermi="['console:group:editGroup']"
                  icon="el-icon-sort"
                  :type="guaranteeConfig.machineState == 1 ? 'primary' : 'info'"
                  :disabled="guaranteeConfig.machineState != 1"
                  @click="manualSwitchFn(true)"
                >切换重要节点</el-button>
              </div>
            </div>
          </div>
          <div class="minH20">
            <div v-show="groupSwitchNowData.message" class="jiankDiv">
              <span>{{ groupSwitchNowData.createTime }}</span>
              <span
                class="centSpan"
                :style="
                  groupSwitchNowData.nodeIp == importantConfig.nodeIp
                    ? 'color: #67c23a'
                    : 'color: #1890ff'
                "
              >{{
                groupSwitchNowData.nodeIp == importantConfig.nodeIp
                  ? "重要节点"
                  : "保障节点"
              }}</span>
              {{ groupSwitchNowData.message }}
            </div>
          </div>

          <div
            v-show="
              showData.initDataStatus !== null &&
                showData.initDataStatus === 1 &&
                NodeRow.dataMonitorEnabled
            "
            style="margin-top: 20px"
          >
            <span
              style="color: red"
            >*注：您修改了数据同步配置，请点击上方切换{{
              guaranteeConfig.allServiceStatus == true &&
                guaranteeConfig.machineState == 1
                ? "重要"
                : "保障"
            }}节点按钮，进行全量和增量数据同步。</span>
          </div>
          <div class="bdBodyTopb">
            <el-row v-if="showBdBodyTopb">
              <el-col :span="10">
                <div class="jd">
                  <div class="flexBox" style="width: 100%">
                    <div class="lable" style="width: 74px">重要节点：</div>
                    <div class="value">
                      <span :key="importantConfig.nodeIp">
                        {{ importantConfig.nodeIp || "加载中..." }}
                      </span>
                      <span v-show="importantConfig.vipState">
                        <span v-if="showData.securityMethod == 1">
                          <el-tooltip
                            class="item"
                            effect="dark"
                            placement="top"
                          >
                            <div slot="content" v-html="showData.vip" />
                            <img
                              class="itemBtn"
                              src="../../../showDataImg/ha.png"
                              style="vertical-align: middle"
                            >
                          </el-tooltip>
                        </span>
                        <span v-else>
                          <el-tooltip
                            class="item"
                            effect="dark"
                            placement="top"
                          >
                            <div slot="content" v-html="showData.vip" />
                            <img
                              class="itemBtn"
                              src="../../../showDataImg/vip.png"
                              style="vertical-align: middle"
                            >
                          </el-tooltip>
                        </span>
                      </span>
                    </div>
                  </div>
                  <div class="flexBox">
                    <div class="lable">节点状态：</div>
                    <div class="value">
                      <span
                        v-for="(item, index) in dict.type.group_node_status"
                        v-show="item.value == importantConfig.machineState"
                        :key="index"
                      >
                        <span
                          v-if="
                            item.value == 3 &&
                              importantConfig.allServiceStatus == 1
                          "
                          style="color: darkgoldenrod"
                        >检查中</span>
                        <span v-else :style="'color:' + item.extendVal">{{
                          item.label
                        }}</span>
                      </span>

                      <span
                        v-show="importantConfig.machineState == 'loading'"
                      >加载中...</span>

                      <span
                        v-if="
                          !importantConfig.machineState ||
                            importantConfig.machineState == 0
                        "
                        style="color: #f56c6c"
                      >故障
                      </span>
                      <!-- <i class="el-icon-question"></i> -->
                    </div>
                  </div>
                  <div class="flexBox">
                    <div class="lable">代理状态：</div>
                    <div class="value">
                      <span
                        v-if="importantConfig.agentStatus == true"
                        style="color: #67c23a"
                      >
                        <i class="el-icon-loading" />
                        在线</span>
                      <span
                        v-else-if="importantConfig.agentStatus == false"
                        style="color: #f56c6c"
                      >
                        <i class="el-icon-error" />
                        故障</span>
                      <span v-else> 加载中...</span>
                    </div>
                  </div>
                  <div class="flexBox">
                    <div class="lable">业务状态：</div>
                    <div class="value">
                      <span
                        v-if="importantConfig.allServiceStatus == true"
                        style="color: #67c23a"
                      >启动</span>
                      <span
                        v-else-if="importantConfig.allServiceStatus == false"
                        style="color: #1890ff"
                      >
                        未启动</span>
                      <span v-else> 加载中...</span>
                    </div>
                  </div>
                </div>
              </el-col>

              <el-col :span="5">
                <div class="switchBox">
                  <div v-show="guaranteeConfig.machineState == 2">
                    <div>
                      <!-- 	<img  class="bigBtn" v-show="GroupAutoSwitch.systemStatus" src="../../../../assets/icons/bzxz.png" alt="" @click.stop="handleSingOut">
											<img  class="bigBtn" v-show="!GroupAutoSwitch.systemStatus"  src="../../../../assets/icons/bzmx.png" alt="" @click.stop="handleSingOut"> -->

                      <!-- <el-button class="bigBtn" @click.stop="handleSingOut" icon="el-icon-umbrella" circle></el-button> -->
                    </div>

                    <div
                      class="bigBtn"
                      :class="GroupAutoSwitch.systemStatus ? 'onBtn' : 'offBtn'"
                      @click.stop="handleSingOut"
                    >
                      <span class="coverSwitch" />
                    </div>

                    <!-- 		<el-switch  v-model="GroupAutoSwitch.systemStatus" :active-value="1" :inactive-value="0" active-color="#409EFF"
										inactive-color="#909399" v-hasPermi="['console:hessNode:edit']">
										</el-switch> -->
                    <p>自动切换</p>
                  </div>
                </div>
              </el-col>

              <el-col :span="9">
                <div class="jd">
                  <div class="flexBox" style="width: 100%">
                    <div class="lable" style="width: 74px">保障节点：</div>
                    <div class="value">
                      <span :key="guaranteeConfig.nodeIp">
                        {{ guaranteeConfig.nodeIp || "加载中..." }}
                      </span>
                      <span v-show="guaranteeConfig.vipState">
                        <span v-if="showData.securityMethod == 1">
                          <el-tooltip
                            class="item"
                            effect="dark"
                            :content="showData.vip"
                            placement="top"
                          >
                            <div slot="content" v-html="showData.vip" />
                            <img
                              class="itemBtn"
                              src="../../../showDataImg/ha.png"
                              style="vertical-align: middle"
                            >
                          </el-tooltip>
                        </span>
                        <span v-else>
                          <el-tooltip
                            class="item"
                            effect="dark"
                            :content="showData.vip"
                            placement="top"
                          >
                            <div slot="content" v-html="showData.vip" />
                            <img
                              class="itemBtn"
                              src="../../../showDataImg/vip.png"
                              style="vertical-align: middle"
                            >
                          </el-tooltip>
                        </span>
                      </span>
                    </div>
                  </div>
                  <div class="flexBox">
                    <div class="lable">节点状态：</div>
                    <div class="value">
                      <span
                        v-for="(item, index) in dict.type.group_node_status"
                        v-show="item.value == guaranteeConfig.machineState"
                        :key="index"
                      >
                        <span
                          v-if="
                            item.value == 3 &&
                              guaranteeConfig.allServiceStatus == 1
                          "
                          style="color: darkgoldenrod"
                        >检查中</span>

                        <span v-else :style="'color:' + item.extendVal">{{
                          item.label
                        }}</span>
                      </span>
                      <span
                        v-show="guaranteeConfig.machineState == 'loading'"
                      >加载中...</span>

                      <span
                        v-if="
                          !guaranteeConfig.machineState ||
                            guaranteeConfig.machineState == 0
                        "
                        style="color: #f56c6c"
                      >
                        故障
                      </span>
                    </div>
                  </div>
                  <div class="flexBox">
                    <div class="lable">代理状态：</div>
                    <div class="value">
                      <span
                        v-if="guaranteeConfig.agentStatus == true"
                        style="color: #67c23a"
                      >
                        <i class="el-icon-loading" />
                        在线</span>
                      <span
                        v-else-if="guaranteeConfig.agentStatus == false"
                        style="color: #f56c6c"
                      >
                        <i class="el-icon-error" />
                        故障</span>
                      <span v-else> 加载中...</span>
                    </div>
                  </div>
                  <div class="flexBox">
                    <div class="lable">业务状态：</div>
                    <div class="value">
                      <span
                        v-if="guaranteeConfig.allServiceStatus == true"
                        style="color: #67c23a"
                      >启动</span>
                      <span
                        v-else-if="guaranteeConfig.allServiceStatus == false"
                        style="color: #1890ff"
                      >
                        未启动</span>
                      <span v-else> 加载中...</span>
                    </div>
                  </div>
                  <div v-show="NodeRow.dataMonitorEnabled" class="flexBox">
                    <div class="lable">增量驱动：</div>
                    <div class="value">
                      <span
                        v-if="guaranteeConfig.mcdcState == 'START'"
                        style="color: #67c23a"
                      >启动</span>
                      <span
                        v-else-if="guaranteeConfig.mcdcState == 'STOP'"
                        style="color: #1890ff"
                      >
                        未启动</span>
                      <span
                        v-else-if="guaranteeConfig.mcdcState == ''"
                        style="color: #f56c6c"
                      >
                        未知</span>
                      <span v-else> 加载中...</span>
                    </div>
                  </div>

                </div></el-col>
            </el-row>
          </div>
        </div>

        <div class="bdBodyBot">
          <el-tabs v-model="activeName" class="mar40" @tab-click="switchTabs">
            <el-tab-pane label="依赖业务" name="first">
              <div class="bdBodyTopTuBox">
                <div class="bdBodyTopTu">
                  <flowChart
                    :key="flowChartIndex"
                    :service-configurations="importantConfig.serviceStatus"
                    :is-edit="true"
                    :is-londing-ani="isLondingAni"
                  />
                </div>
                <div class="bdBodyTopTuC" />
                <div class="bdBodyTopTu">
                  <flowChart
                    :key="flowChartIndex"
                    :is-server-imp="guaranteeConfig.machineState != 1"
                    :service-configurations="guaranteeConfig.serviceStatus"
                    :is-edit="true"
                    :is-londing-ani="isLondingAni"
                  />
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="切换历史" name="second">
              <el-table :data="historyData" style="width: 100%">
                <el-table-column prop="nodeName" label="节点名称" width="150" />
                <el-table-column prop="nodeIp" label="节点IP" width="128" />
                <el-table-column prop="createTime" width="158" label="创建时间">
                  <template slot-scope="scope">
                    {{ scope.row.insertTime }}
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="切换信息">
                  <template slot-scope="scope">
                    {{ scope.row.message }}
                  </template>
                </el-table-column>
              </el-table>

              <div>
                <pagination
                  v-show="historyDataTotal > 0"
                  :total="historyDataTotal"
                  :page.sync="historyListQuery.pgNum"
                  :limit.sync="historyListQuery.pgSize"
                  @pagination="getHistoryList"
                />
              </div>
            </el-tab-pane>

            <el-tab-pane
              v-if="sysMonitorData.isOpen"
              label="系统监控"
              name="five"
            >
              <table width="100%" class="jktab">
                <tr>
                  <th />
                  <th>状态</th>
                  <th>使用率</th>
                  <th>操作</th>
                </tr>
                <tr>
                  <td>CPU</td>
                  <td>
                    <span
                      v-show="sysMonitorData.cpuStatus == 1"
                      style="color: #30b95c"
                    >正常</span>
                    <span
                      v-show="sysMonitorData.cpuStatus == 0"
                      style="color: #f56c6c"
                    >异常</span>
                  </td>
                  <td width="200px">
                    {{ sysMonitorData.nodeCpu || "加载中..." }}
                  </td>
                  <td />
                </tr>
                <tr>
                  <td>内存</td>
                  <td>
                    <span
                      v-show="sysMonitorData.memStatus == 1"
                      style="color: #30b95c"
                    >正常</span>
                    <span
                      v-show="sysMonitorData.memStatus == 0"
                      style="color: #f56c6c"
                    >异常</span>
                  </td>
                  <td width="200px">
                    {{ sysMonitorData.nodeMemPercentage || "加载中..." }}
                  </td>
                  <td />
                </tr>
                <tr>
                  <td>磁盘</td>
                  <td>
                    <span
                      v-show="sysMonitorData.diskStatus == 1"
                      style="color: #30b95c"
                    >正常</span>
                    <span
                      v-show="sysMonitorData.diskStatus == 0"
                      style="color: #f56c6c"
                    >异常</span>
                  </td>
                  <td width="200px">
                    {{ sysMonitorData.nodeDiskPercentage || "加载中..." }}
                  </td>
                  <td>
                    <el-button
                      v-hasPermi="['console:hessNode:edit']"
                      type="primary"
                      size="mini"
                      @click="securitySystemEditFn"
                    >刷新</el-button>
                  </td>
                </tr>
              </table>
            </el-tab-pane>

            <el-tab-pane
              v-if="eachersData.isOpen"
              label="健康监测"
              name="six"
              class="h400"
              :class="defultBox ? 'defultBox' : ''"
            >
              <table width="180px" class="jktab">
                <tr>
                  <th>类型</th>
                  <th>状态</th>
                </tr>

                <tr>
                  <td>
                    <el-tag
                      :type="info != '2' ? 'info' : ''"
                      @click="changeData('2')"
                    >磁盘</el-tag>
                  </td>
                  <td>
                    <span
                      v-show="eachersData.processStatus == 2"
                      style="color: #e6a23c"
                    >未知</span>
                    <span
                      v-show="eachersData.diskUsedStatus == 1"
                      style="color: #30b95c"
                    >正常</span>
                    <span
                      v-show="eachersData.diskUsedStatus == 0"
                      style="color: #f56c6c"
                    >异常</span>
                  </td>
                </tr>
                <tr>
                  <td>
                    <el-tag
                      :type="info != '1' ? 'info' : ''"
                      @click="changeData('1')"
                    >进程</el-tag>
                  </td>
                  <td>
                    <span
                      v-show="eachersData.processStatus == 2"
                      style="color: #e6a23c"
                    >未知</span>
                    <span
                      v-show="eachersData.processStatus == 1"
                      style="color: #30b95c"
                    >正常</span>
                    <span
                      v-show="eachersData.processStatus == 0"
                      style="color: #f56c6c"
                    >异常</span>
                  </td>
                </tr>

                <tr>
                  <td>
                    <el-tag
                      v-hasPermi="['console:hessNode:edit']"
                      :type="info != '3' ? 'info' : ''"
                      @click="changeData('3')"
                    >连接</el-tag>
                  </td>
                  <td>
                    <span
                      v-show="eachersData.processStatus == 2"
                      style="color: #e6a23c"
                    >未知</span>
                    <span
                      v-show="eachersData.processStatus == 1"
                      style="color: #30b95c"
                    >正常</span>
                    <span
                      v-show="eachersData.processStatus == 0"
                      style="color: #f56c6c"
                    >异常</span>
                  </td>
                </tr>

                <tr>
                  <td />
                  <td />
                </tr>
                <tr>
                  <td />
                  <td />
                </tr>
              </table>

              <span id="echarsType">
                <el-tag
                  :type="echarsType != '1' ? 'info' : ''"
                  @click="changeEcharsType('k')"
                >K线图
                </el-tag>
                <el-tag
                  :type="echarsType != '2' ? 'info' : ''"
                  @click="changeEcharsType('f')"
                >分时图</el-tag>
              </span>

              <div
                v-show="echarsType == 1 && !defultBox"
                id="candlestick"
                ref="candlestick"
                class="candlestick"
              />
              <div
                v-show="echarsType == 2 && !defultBox"
                id="candlestickLine"
                ref="candlestickLine"
                class="candlestick"
                @datazoom="onDataZoom($event, optionLine)"
              />

              <div v-show="defultBox" id="defultBox" class="candlestick">
                <p>暂无数据</p>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 切换日志监听 -->
    <el-dialog
      title="监控日志"
      class="sysDialog wjjtDialog"
      :visible.sync="groupSwitchNowVisible"
      width="900px"
      :before-close="groupSwitchNowClose"
    >
      <span id="jianceBtn">监测中 <i class="el-icon-loading" /></span>
      <div id="jcrzBox" class="bdBody">
        <div class="bdBodyBot">
          <div class="bdBodyTopTuBox">
            <el-scrollbar class="center-scrollbar">
              <el-table :data="groupSwitchNowList" style="width: 900px">
                <el-table-column
                  prop="createTime"
                  width="180"
                  label="创建时间"
                />
                <el-table-column prop="nodeId" width="100" label="节点名称">
                  <template slot-scope="scope">
                    <span
                      v-if="scope.row.nodeIp == importantConfig.nodeIp"
                      style="color: #67c23a"
                    >重要节点</span>
                    <span v-else style="color: #1890ff">保障节点</span>
                  </template>
                </el-table-column>
                <el-table-column prop="message" label="信息">
                  <template slot-scope="scope">
                    {{ scope.row.message }}
                  </template>
                </el-table-column>
              </el-table>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="groupSwitchNowClose">取 消</el-button>
        <!-- <el-button type="primary" @click="groupSwitchNowClose">刷 新 </el-button> -->
      </span>
    </el-dialog>

    <!-- 切换弹框 -->
    <tipsVisible ref="tipsVisible" @startSwitching="startSwitching" />
  </div>
</template>

<script>
import {
  groupStatus,
  groupSwitchNow,
  historyList,
  exitBz,
  manualSwitch,
  selectHessGroupAutoSwitch,
  exchangeNodeType,
  getSysMonitorInfo,
  securitySystemEdit,
  queryKLine,
  getInfo,
  checkVip
} from '@/api/console/group'
// 示意图组件
import flowChart from '@/views/components/flowChart/flowChart'

import {
  nodeSystemInfo
} from '@/api/monitor/node'

import * as echarts from 'echarts'
import { listConfig } from '@/api/system/config'

// 音乐组件
import dyAudio from '@/views/components/audio/dyAudio'

import tipsVisible from '@/views/console/securityGroup/groupDialog/sysDialog/tipsVisible'

export default {
  components: {
    flowChart,
    dyAudio,
    tipsVisible
  },
  dicts: ['group_node_status'],
  data() {
    return {
      monitorList: [
        {
          title: '1.监控页面指引',
          helpMsg: '监控页面指引'
        },
        {
          title: '2.依赖业务显示异常',
          helpMsg: '依赖业务显示异常'
        },
        {
          title: '3.节点状态显示异常',
          helpMsg: '节点状态显示异常'
        },
        {
          title: '4.提示需要数据同步',
          helpMsg: '提示需要数据同步'
        }
      ],
      tipOptions: [],
      startParms: {
        id: '',
        initDataStatus: 0
      },
      showMsg: true,
      isLinux: true,
      groupId: '',
      // 是否开始同步增量状态
      isOpenIncrement: true,
      // linux 版本是否开启快照，页面用true false ,传参改成 “S”，“N”
      snapshotMod: true,
      // 是否开始同步增量弹框 保留之前的左右信息转态
      isOpenflag: false,
      // 同步状态  status ： start   end  error   -1 初始化
      switchRsyncDirLogStatus: -1,
      // 其同步日志数据
      switchRsyncDirLogData: [],
      // 主要节点信息
      importantConfig: {},
      // 是否达到增量数据包同步完成的标准
      issyncDataStatus: false,
      // 页面显示数据包数量
      showDataTb: {
        dq: '待同步',
        mb: '待同步'
      },
      issyncDataStatusLoding: 0,
      isOpenIncrementLoding: 0,
      systemAutoStatus: '',
      tipsVisible: false,
      // 默认开启增量数据包同步
      isSyncDataStart: true,
      // 保障节点信息
      guaranteeConfig: {},
      // 标题
      dialogVisibleTitle: '',
      // 弹框是否开启
      dialogVisible: false,
      // 示意图 key 值 通过++ 实现刷新节点dom
      flowChartIndex: 0,
      // 监控的节点信息
      NodeRow: {},
      // 控制虚线样式 left right
      lineClass: '',
      // 动画运行的方向
      animationIsLeft: '',
      // 监控节点信息
      securityNodesList: [],
      // 监控节点 历史记录
      historyData: [],
      group_node_status_options: [],
      // 下方切换tab 状态
      activeName: 'first',
      // 是否处于切换节点状态
      isLondingAni: false,
      // 切换历史查询参数
      historyListQuery: {
        pgNum: 1,
        pgSize: 5,
        securityName: ''
      },
      // 监控日志显示前面页面
      groupSwitchNowData: {
        createTime: '',
        nodeIp: '',
        message: ''
      },
      // 切换历史总条数
      historyDataTotal: 0,
      // 自动切换保障数据
      GroupAutoSwitch: [],
      // 监控日志页面是否显示
      groupSwitchNowVisible: false,
      // 监控日志页 数据
      groupSwitchNowList: [],
      ignoreOptions: [],
      ignore: [],
      // 自动切换数据 查询状态
      loadingGroupAutoSwitch: false,
      eachersData: {
        isOpen: false
      },
      showBdBodyTopb: false,
      // 是否是设置脑裂状态
      isSetRoleState: false,
      drbdFlag: false,
      // 点击显示 数据
      showData: {
        groupStatus: '',
        securityMethod: '',
        vip: '',
        vipStatus: ''
      },
      // 系统监控数据
      sysMonitorData: {
        isOpen: false
      },
      importantConfigHaPort: '',
      syncDataStatusTime: '',
      group_switch_copy_info: '',
      info: 2,
      echarsType: 1,
      optionLine: {
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          scale: true,
          splitArea: {
            show: true
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        dataZoom: [
          {
            show: true,
            type: 'slider',
            top: '90%',
            start: 80,
            end: 100
          },
          {
            type: 'inside',
            start: 50,
            end: 100
          }
        ],
        series: [
          {
            data: [],
            type: 'line',
            lineStyle: {
              color: '#5470C6',
              width: 1
            }
          }
        ]
      },
      visualMap: [
        {
          show: false,
          type: 'continuous',
          seriesIndex: 0,
          min: 0,
          max: 660
        }
      ],
      // 当分时图或者K线图没有数据的时候显示默认的提示语
      defultBox: false,
      options: {
        xAxis: {
          data: []
        },
        yAxis: {
          scale: true,
          splitArea: {
            show: true
          }
        },
        legend: {
          data: ['日K', 'MA5']
        },
        dataZoom: [
          {
            show: true,
            type: 'slider',
            top: '90%',
            start: 80,
            end: 100
          },
          {
            type: 'inside',
            start: 50,
            end: 100
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          position: {
            right: '1%',
            bottom: 30
          },
          formatter: function(params, ticket, callback) {
            var result = '时间：' + params[0].name + '<br/>'
            params.forEach(function(item) {
              if (item.seriesName == '日线') {
                result +=
                  item.marker +
                  ' 开始 ' +
                  item.value.toString().split(',')[1] +
                  '，' +
                  '</br>' +
                  item.marker +
                  ' 结束 ' +
                  item.value.toString().split(',')[2] +
                  '，' +
                  '</br>' +
                  item.marker +
                  ' 最低 ' +
                  item.value.toString().split(',')[3] +
                  '，' +
                  '</br>' +
                  item.marker +
                  ' 最高 ' +
                  item.value.toString().split(',')[4] +
                  '，' +
                  '</br>'
              } else {
                result +=
                  item.marker +
                  ' ' +
                  item.seriesName +
                  ' : ' +
                  item.value.toString().substring(0, 7) +
                  '</br>'
              }
            })
            return result
          }
        },

        series: [
          {
            name: '日线',
            type: 'candlestick',
            data: []
          },
          {
            name: '5天均值',
            type: 'line',
            data: [],
            smooth: false,
            lineStyle: {
              opacity: 0.5
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.getDicts('group_node_nio_status').then((response) => {
      if (response.data) {
        this.tipOptions = response.data
        this.$refs.tipsVisible.options = response.data
      } else {
        this.$message({
          message: '获取队列失败',
          type: 'error'
        })
      }
    })
    this.init()
  },
  methods: {
    // 初始化
    // row  节点信息
    // flag  判断左右切换方向
    init(row, flag) {
      var vue = this
      // 忽略类型
      this.getDicts('hcopy_ignore').then((response) => {
        this.ignoreOptions = response.data
      })

      listConfig({
        pageNum: 1,
        pageSize: 1,
        configKey: 'group_switch_copy_info'
      }).then((response) => {
        if (response && response.rows.length > 0) {
          this.group_switch_copy_info = response.rows[0].configValue
        } else {
          this.group_switch_copy_info = ''
        }
      })

      this.showBdBodyTopb = true

      if (row) {
        this.NodeRow = row

        // 判断如果关闭了增量，那么同时需要将选择的勾去掉，不然切换的判断会有误
        if (!this.NodeRow.dataMonitorEnabled) {
          this.$refs.tipsVisible.isSyncDataStart = false
        } else {
          this.$refs.tipsVisible.isSyncDataStart = true
        }
        // console.log('dataMonitorEnabled',this.NodeRow)
        this.$refs.tipsVisible.isLinux = true

        row.securityNodes.map((item) => {
          if (item.sysType == 'Windows') {
            this.$refs.tipsVisible.isLinux = false
          }
        })

        this.id = row.id
        this.dialogVisibleTitle =
          '应急保障监控(' + this.NodeRow.securityName + ')'
        this.lineClass = ''

        // 获取配置的vip 信息
        this.showData.groupStatus = row.groupStatus
        if (row.securityConfs.length) {
          this.showData.securityMethod = row.securityConfs[0].securityMethod
        }

        if (row.securitySystemTrend && row.securitySystemTrend.isOpen) {
          this.eachersData.isOpen = true
        } else {
          this.eachersData.isOpen = false
        }

        if (row.securityConfs && row.securityConfs.isOpen) {
          this.sysMonitorData.isOpen = true
        } else {
          this.sysMonitorData.isOpen = false
        }

        let vipArr = []
        console.log(row)

        row.securityConfs.map((item) => {
          vipArr = vipArr.concat(item.vip.split(','))
        })

        let vip = ''
        vipArr.map((item) => {
          vip += item + '<br/>'
        })

        this.showData.vip = vip

        if (flag) {
          if (this.setHandleMonitorTimeout) {
            clearTimeout(this.setHandleMonitorTimeout)
          }

          this.showData.id = row.id
          this.showData.initDataStatus = row.initDataStatus
          this.showData.importantNodeId = row.importantNodeId
          this.showData.importantNodeIp = row.importantNodeIp
          this.showData.securityNodeId = row.securityNodeId
          this.showData.securityNodeIp = row.securityNodeIp
          var vue = this
          this.securityNodes = row.securityNodes

          row.securityNodes.map((item) => {
            if (item.id == row.importantNodeId) {
              vue.importantConfigHaPort = item.haPort
            }
          })

          this.importantConfig.nodeIp = ''
          this.importantConfig.agentStatus = 'loading'
          this.importantConfig.allServiceStatus = 'loading'
          this.importantConfig.machineState = 'loading'
          this.importantConfig.mcdcState = 'loading'
          this.importantConfig.serviceStatus = []
          this.importantConfig.nioWorkStatus = {
            delayTime: '',
            pattern: '',
            queue: ''
          }

          this.guaranteeConfig.nodeIp = ''
          this.guaranteeConfig.agentStatus = 'loading'
          this.guaranteeConfig.allServiceStatus = 'loading'
          this.guaranteeConfig.machineState = 'loading'
          this.guaranteeConfig.mcdcState = 'loading'

          this.guaranteeConfig.serviceStatus = []
          this.guaranteeConfig.nioWorkStatus = {
            delayTime: '',
            pattern: '',
            queue: ''
          }

          // 通过修改key 达到刷新dom
          this.flowChartIndex++

          // 第一次 会查历史数据  和 是否自动切换
          this.getHistoryList()

          this.groupSwitchNowData = {
            createTime: '',
            nodeIp: '',
            message: ''
          }
          // 获取监控日志
          this.groupSwitchNowFn()

          this.activeName = 'first'
          this.dialogVisible = true
        }
      }
      this.groupId = row.id
      this.handleMonitor(row)
      this.getgroupStatus(row)

      // console.log(this.NodeRow )
    },
    // 获取数据
    getEachersData() {
      queryKLine({
        groupId: this.groupId
      }).then((res) => {
        if (res.code == 200) {
          // console.log(res);
          this.eachersData = res.data
          this.changeData(this.info)
        } else {
          this.msgSuccess(res.msg)
        }
      })
    },
    // 系统监测图
    showEcharts(data, hours) {
      var vue = this
      if (!data) {
        data = []
        this.defultBox = true
      } else {
        this.defultBox = false
      }

      var xData = []
      var kData = []
      var jData = []
      data.map((item) => {
        xData.push(item.dateVal)
        if (!hours) {
          kData.push(item.kVal)
          jData.push(item.avgVal)
        } else {
          jData.push(item.val)
        }
      })

      if (this.echarsType == 1) {
        // x轴时间数据
        this.options.xAxis.data = xData
        // K线图数据
        this.options.series[0].data = kData
        // 5天均线数据
        this.options.series[1].data = jData

        if (!this.candlestick || this.$refs.candlestick.children.length == 0) {
          this.candlestick = echarts.init(this.$refs.candlestick)
        }

        if (kData.length < 10) {
          this.options.dataZoom[0].start = 0
        } else if (kData.length > 10 && kData.length < 50) {
          this.options.dataZoom[0].start = 30
        } else if (kData.length > 50 && kData.length < 140) {
          this.options.dataZoom[0].start = 60
        } else {
          this.options.dataZoom[0].start = 80
        }

        this.candlestick.on('datazoom', function(params) {
          if (params.start) {
            vue.optionLine.dataZoom[0].start = params.start
            vue.optionLine.dataZoom[0].end = params.end
          } else {
            vue.optionLine.dataZoom[0].start = params.batch[0].start
            vue.optionLine.dataZoom[0].end = params.batch[0].end
          }
        })
        this.candlestick.setOption(this.options, true)
      } else if (this.echarsType == 2) {
        // x轴时间数据
        this.optionLine.xAxis.data = xData
        // 均线数据
        this.optionLine.series[0].data = jData

        if (
          !this.candlestickLine ||
          this.$refs.candlestickLine.children.length == 0
        ) {
          this.candlestickLine = echarts.init(this.$refs.candlestickLine)
        }

        this.candlestickLine.on('datazoom', function(params) {
          if (params.start) {
            vue.optionLine.dataZoom[0].start = params.start
            vue.optionLine.dataZoom[0].end = params.end
          } else {
            vue.optionLine.dataZoom[0].start = params.batch[0].start
            vue.optionLine.dataZoom[0].end = params.batch[0].end
          }
        })

        this.candlestickLine.setOption(this.optionLine, true)
      }
    },
    // 切换需要显示的 K线图数据
    changeData(type) {
      this.info = type
      this.$nextTick(() => {
        if (this.eachersData.isOpen != 1) {
          if (this.activeName == 'six') {
            this.activeName = 'first'
          }
          // 未开启健康监测
          return false
        }

        if (this.echarsType == 1) {
          if (type == '1') {
            this.showEcharts(this.eachersData.kLine.processLine)
          } else if (type == '2') {
            this.showEcharts(this.eachersData.kLine.diskUsedLine)
          } else if (type == '3') {
            this.showEcharts(this.eachersData.kLine.networkLine)
          }
        } else if (this.echarsType == 2) {
          if (type == '1') {
            this.showEcharts(this.eachersData.hourLine.processLine, 'hours')
          } else if (type == '2') {
            this.showEcharts(this.eachersData.hourLine.diskUsedLine, 'hours')
          } else if (type == '3') {
            this.showEcharts(this.eachersData.hourLine.networkLine, 'hours')
          }
        }
      })
    },
    // 切换k线图 和 分时图
    changeEcharsType(type) {
      if (type == 'k') {
        this.echarsType = 1
        this.changeData(this.info)
      } else if (type == 'f') {
        this.echarsType = 2
        this.changeData(this.info)
      }
    },

    // 修复监控节点状态
    securitySystemEditFn() {
      securitySystemEdit({
        id: this.sysMonitorData.id,
        diskStatus: 1,
        cpuStatus: 1,
        memStatus: 1
      }).then((res) => {
        if (res.code == 200) {
          this.msgSuccess(res.msg)

          this.getSysMonitorInfoFn()
        }
        // console.log(res);
      })
    },
    // 交换节点 主从关系
    exchangeNodeTypeFn() {
      this.$confirm(
        '操作将 主节点 ，从节点 的状态交换，请确认是否操作?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        this.loadingQdbz = this.$loading({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        exchangeNodeType({
          id: this.showData.id,
          securityNodeId: this.NodeRow.importantNodeId,
          securityNodeIp: this.NodeRow.importantNodeIp,
          importantNodeId: this.NodeRow.securityNodeId,
          importantNodeIp: this.NodeRow.securityNodeIp
        })
          .then((response) => {
            this.msgSuccess('状态交换成功')

            this.loadingQdbz.close()
            // 重置状态
            this.czTypeFn()

            this.$emit('getList')
          })
          .catch((err) => {
            this.loadingQdbz.close()
          })
      })
    },

    // 监视器
    handleMonitor(row) {
      // console.log(row);

      var vue = this
      vue.securityNodesList = []
      // 查询是否切换
      this.getGroupAutoSwitch()

      row.securityNodes.map((item) => {
        if (item.id == row.importantNodeId) {
          vue.securityNodesList.push(item)
        }
      })

      row.securityNodes.map((item) => {
        if (item.id == row.securityNodeId) {
          vue.securityNodesList.push(item)
        }
      })

      if (vue.dialogVisible == true) {
        if (this.setHandleMonitorTimeout) {
          clearTimeout(this.setHandleMonitorTimeout)
        }

        this.setHandleMonitorTimeout = setTimeout(() => {
          this.handleMonitor(row)

          row.securityConfs = row.securityConfs ? row.securityConfs : {}
          this.sysMonitorData.isOpen = row.securityConfs.isOpen
          if (this.sysMonitorData.isOpen) {
            // 获取系统监控
            this.getSysMonitorInfoFn()
          }

          row.securitySystemTrend = row.securitySystemTrend
            ? row.securitySystemTrend
            : {}
          this.eachersData.isOpen = row.securitySystemTrend.isOpen
          if (this.eachersData.isOpen) {
            // 获取健康监测数据
            this.getEachersData()
          }
          // 红色字体状态修改
          getInfo({
            id: row.id
          }).then((response) => {
            this.showData.initDataStatus = response.data.initDataStatus
          })
        }, 6000)
      } else {
        // 关闭动画
        clearInterval(this.time)
      }
    },
    // 虚线动画
    manualSwitching(isLeft, vue) {
      var dom = vue.$refs.line
      var num = 0

      if (vue.time) {
        clearInterval(vue.time)
      }

      // 虚线是否向左移动
      if (isLeft == 'right') {
        vue.time = setInterval(function() {
          num -= 5
          if (dom && dom.clientWidth) {
            if (Math.abs(num) > dom.clientWidth / 2) {
              num = 0
            }
            dom.style.left = num + 'px'
          }
        }, 250)

        vue.lineClass = 'leftLine'
      } else if (isLeft == 'left') {
        let left = 0
        // 否则向右移动
        if (dom && dom.clientWidth) {
          left = Math.abs(dom.clientWidth / 2)
        }
        var num = 0 - left

        vue.time = setInterval(function() {
          num += 5
          if (num > 0) {
            num = 0 - left
          }
          dom.style.left = num + 'px'
        }, 250)
        vue.lineClass = 'rightLine'
      } else {
        vue.lineClass = ''
      }
    },
    getgroupStatus(row) {
      // 节点运行状态
      // NODE_RUNNING = 1;   //机器在正常接管业务
      // NODE_STANDBY = 2;   //机器在等待接管状态
      // NODE_SWITCHING = 3; //机器在切换状态
      var vue = this

      function nodeStatus1() {
        new Promise((resolveP) => {
          // console.log('1.加载 获取 重要节点的数据 getIpInfo')
          vue.getImportantNodeStatus(row, resolveP)
        }).then((result) => {
          if (JSON.stringify(result) == '{}' || result == undefined) {
            // 如果上一次保存的状态是正常，这次检测是故障
            if (
              typeof vue.importantConfig === 'object' &&
              vue.importantConfig.machineState == 1
            ) {
              // 主用系统损毁
              vue.$refs.dyAudio.playAudio('A')
            }

            vue.importantConfig.agentStatus = ''
            vue.importantConfig.allServiceStatus = ''
            vue.importantConfig.machineState = ''
            vue.importantConfig.cdcTaskState = ''
            vue.importantConfig.mcdcState = ''
            vue.importantConfig.nioWorkStatus = {
              delayTime: '-1',
              pattern: '0',
              queue: '-1'
            }
            vue.importantConfig.vipState = ''
            vue.importantConfig.queueState = ''
            vue.importantConfig.serviceStatus = []

            vue.importantConfig.queueNum = '未知'
            vue.importantConfig.nodeIp = row.importantNodeIp
          } else if (result == 'outTime') {
            console.error('接口连接超时忽略数据A')
          } else {
            row.vipState = vue.importantConfig.vipState
            delete vue.importantConfig.nodeIp
            delete vue.importantConfig.vipState
            // 如果上一次的数据和本次不一致，并且还不是主机在业务运行中
            if (
              JSON.stringify(vue.importantConfig) !==
              JSON.stringify(result[row.importantNodeIp])
            ) {
              if (vue.importantConfig.machineState == 1) {
                vue.$refs.dyAudio.playAudio('A')
              }

              vue.importantConfig = result[row.importantNodeIp]
              // 通过修改key 达到刷新dom
              vue.flowChartIndex++
              // console.log('刷新dom111',vue.flowChartIndex);
            }
            vue.importantConfig.nodeIp = row.importantNodeIp
            vue.importantConfig.vipState = row.vipState
          }

          if (vue.nodeTime1) {
            clearTimeout(vue.nodeTime1)
          }

          vue.nodeTime1 = setTimeout(() => {
            if (vue.dialogVisible == true) {
              nodeStatus1()
            }
          }, 6000)
        })
      }
      nodeStatus1()

      function nodeStatus2() {
        new Promise((resolveP2) => {
          // console.log('2.加载 保障节点的磁盘使用数据')
          vue.getSecurityNodeIpStatus(row, resolveP2)
        }).then((result) => {
          if (JSON.stringify(result) == '{}' || result == undefined) {
            if (
              typeof result[row.securityNodeIp] === 'object' &&
              result[row.securityNodeIp].machineState == 1
            ) {
              vue.$refs.dyAudio.playAudio('B')
            }

            vue.guaranteeConfig.agentStatus = ''
            vue.guaranteeConfig.allServiceStatus = ''
            vue.guaranteeConfig.machineState = ''
            vue.guaranteeConfig.cdcTaskState = ''
            vue.guaranteeConfig.mcdcState = ''
            vue.guaranteeConfig.nioWorkStatus = {
              delayTime: '-1',
              pattern: '0',
              queue: '-1'
            }

            vue.guaranteeConfig.vipState = ''
            vue.guaranteeConfig.queueState = ''
            vue.guaranteeConfig.serviceStatus = []
            vue.guaranteeConfig.queueNum = '未知'
            vue.guaranteeConfig.nodeIp = row.securityNodeIp
          } else if (result == 'outTime') {
            console.error('接口连接超时忽略数据B')
          } else {
            row.vipState = vue.guaranteeConfig.vipState
            delete vue.guaranteeConfig.nodeIp
            delete vue.guaranteeConfig.vipState

            // 如果上一次的数据和本次不一致，并且还不是主机在业务运行中
            if (
              JSON.stringify(vue.guaranteeConfig) !==
              JSON.stringify(result[row.securityNodeIp])
            ) {
              vue.guaranteeConfig = result[row.securityNodeIp]
              // 通过修改key 达到刷新dom
              vue.flowChartIndex++
              // console.log('刷新dom-flowChartIndex22',vue.flowChartIndex);

              if (
                vue.guaranteeConfig.machineState != 'loading' &&
                result[row.securityNodeIp].machineState == 1
              ) {
                vue.$refs.dyAudio.playAudio('B')
              }

              // 判断左右方向
              vue.animationIsLeft = result[row.securityNodeIp].securityFlag
            }
            vue.guaranteeConfig.nodeIp = row.securityNodeIp
            vue.guaranteeConfig.vipState = row.vipState
            vue.$nextTick(() => {
              let isLeft = ''
              // 保障方向0.主要切换保障  1.保障切主要
              if (vue.animationIsLeft == 1) {
                isLeft = 'right'
              } else {
                isLeft = 'left'
              }

              vue.isLondingAni = false

              if (
                vue.importantConfig.machineState == 3 ||
                vue.guaranteeConfig.machineState == 3
              ) {
                vue.isLondingAni = true
              } else {
                vue.isLondingAni = false
                vue.lineClass = ''

                if (vue.time) {
                  clearInterval(vue.time)
                }
              }

              if (vue.isLondingAni) {
                // 加载虚线动画
                vue.manualSwitching(isLeft, vue)
              }
            })
          }

          if (vue.nodeTime2) {
            clearTimeout(vue.nodeTime2)
          }

          vue.nodeTime2 = setTimeout(() => {
            if (vue.dialogVisible == true) {
              // console.log('执行B节点的刷新')
              nodeStatus2()
            }
          }, 6000)
        })
      }
      nodeStatus2()
    },
    getImportantNodeStatus(row, resolve) {
      var vue = this
      groupStatus({
        id: vue.id,
        nodeId: row.importantNodeId
      }).then((response) => {
        if (row.importantNodeId != vue.NodeRow.importantNodeId) {
          // console.log('如果查询A超时导致，导致的异步查询干扰到现在数据的情况，需要阻止拦截！')
          resolve('忽略数据')
        } else if (response == 'outTime') {
          resolve(response)
        } else {
          resolve(response.data)
        }
      })

      this.checkVipFn(vue.id, row.importantNodeId, 'importantConfig')
    },
    getSecurityNodeIpStatus(row, resolve) {
      var vue = this
      groupStatus({
        id: vue.id,
        nodeId: row.securityNodeId
      }).then((response) => {
        if (row.securityNodeId != vue.NodeRow.securityNodeId) {
          // console.log('如果查询B超时导致，导致的异步查询干扰到现在数据的情况，需要阻止拦截！')
          resolve('忽略数据')
        } else if (response == 'outTime') {
          resolve(response)
        } else {
          resolve(response.data)
        }
      })

      this.checkVipFn(vue.id, row.securityNodeId, 'guaranteeConfig')
    },
    // 切换标签页
    switchTabs() {
      var vue = this
      // 切换后 恢复定时
      this.isSetRoleState = false
      if (this.activeName == 'first') {
        return false
      } else if (this.activeName === 'second') {
        this.getHistoryList()
      } else if (this.activeName === 'third') {
      } else if (this.activeName === 'fourth') {
      } else if (this.activeName === 'five') {
        this.getNodeSystemInfo()
      } else if (this.activeName === 'six') {
      }
    },
    // 查询系统参数
    getSysMonitorInfoFn() {
      var vue = this
      getSysMonitorInfo({
        securityId: this.id
      }).then((response) => {
        if (response.code == 200) {
          if (response.data) {
            if (
              vue.sysMonitorData.nodeCpu ||
              vue.sysMonitorData.nodeDiskPercentage ||
              vue.sysMonitorData.nodeMemPercentage
            ) {
              response.data.nodeCpu = vue.sysMonitorData.nodeCpu
              response.data.nodeDiskPercentage =
                vue.sysMonitorData.nodeDiskPercentage
              response.data.nodeMemPercentage =
                vue.sysMonitorData.nodeMemPercentage
            }
            vue.sysMonitorData = response.data

            if (vue.fivedTime) {
              return false
            }
            vue.getNodeSystemInfo()
          }
        }
      })
    },
    // 查寻使用率
    getNodeSystemInfo() {
      var vue = this
      nodeSystemInfo({
        nodeIp: this.importantConfig.nodeIp, // '192.168.2.32',
        haPort: this.importantConfigHaPort // '49101',
      })
        .then((response) => {
          if (response.data) {
            this.$set(
              vue.sysMonitorData,
              'nodeCpu',
              response.data.nodeCpu + '%'
            )
            this.$set(
              vue.sysMonitorData,
              'nodeDiskPercentage',
              response.data.nodeDiskPercentage + '%'
            )
            this.$set(
              vue.sysMonitorData,
              'nodeMemPercentage',
              response.data.nodeMemPercentage + '%'
            )
          } else {
            this.$set(vue.sysMonitorData, 'nodeCpu', '加载失败')
            this.$set(vue.sysMonitorData, 'nodeDiskPercentage', '加载失败')
            this.$set(vue.sysMonitorData, 'nodeMemPercentage', '加载失败')
            console.error('此节点，系统监控结果数据为空')
            return false
          }
        })
        .catch((res) => {
          this.loading.close()
        })
    },
    // 获取查询保障状态
    getGroupAutoSwitch() {
      // this.loadingGroupAutoSwitch = true;
      selectHessGroupAutoSwitch({
        id: this.id
      })
        .then((response) => {
          if (response == 'outTime') {
            return false
          }
          // this.loadingGroupAutoSwitch = false;
          const dataJson = {}
          if (response.data == true) {
            dataJson.systemStatus = 1
          } else if (response.data == false) {
            dataJson.systemStatus = 0
          }
          this.systemAutoStatus = response.data

          this.GroupAutoSwitch = dataJson
        })
        .catch(() => {
          // this.loadingGroupAutoSwitch = false;
        })
    },
    // 查询vip 信息
    checkVipFn(id, nodeId, type) {
      var vue = this
      checkVip({
        id: id,
        nodeId: nodeId
      })
        .then((res) => {
          if (res == 'outTime') {
            return false
          }

          if (vue.$data[type].vipState != res.data.vipState) {
            vue.$data[type].vipState = res.data.vipState
            // 通过修改key 达到刷新dom
            this.flowChartIndex++
          }
        })
        .catch(() => {
          // this.loadingGroupAutoSwitch = false;
        })
    },
    // 获取历史记录
    getHistoryList() {
      historyList({
        groupId: this.id,
        pgSize: this.historyListQuery.pgSize,
        pgNum: this.historyListQuery.pgNum
      }).then((response) => {
        console.log(response, '获取历史')
        this.historyData = response.rows
        this.historyDataTotal = response.total
        if (this.historyDataTotal > 300) {
          this.historyDataTotal = 300
        }
      })
    },

    manualSwitchFn(flag) {
      // 监测 如果没有在同步配置中配置参数，则无需弹出同步框。 直接开始切换
      if (this.NodeRow.fullTransferEnabled) {
        this.$refs.tipsVisible.tipsVisible = true
        this.$refs.tipsVisible.NodeRow = this.NodeRow
        this.$refs.tipsVisible.id = this.id

        this.$refs.tipsVisible.isOpenflag = flag

        this.$refs.tipsVisible.guaranteeConfig = this.guaranteeConfig
        this.$refs.tipsVisible.importantConfig = this.importantConfig

        this.$refs.tipsVisible.ywjData.ip = this.importantConfig.nodeIp
        this.$refs.tipsVisible.bzjData.ip = this.guaranteeConfig.nodeIp
        // 进页面直接查询是否存在同步任务；
        this.$refs.tipsVisible.getIncrementLog('first')

        this.$refs.tipsVisible.syncDataStatusTime = clearTimeout(
          this.$refs.tipsVisible.syncDataStatusTime
        )
        this.$refs.tipsVisible.getGroupNodeNioInfoFn()
      } else {
        this.$confirm('此操作将 强制切换节点, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.manualSwitchFnAfter(flag)
        })
      }
    },
    // 开始切换
    startSwitching(isOpenflag) {
      this.$confirm(
        '此操作将 强制切换节点,如果同步了数据，将会强制覆盖， 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.$refs.tipsVisible.tipsVisible = false
          this.switchRsyncDirLogStatus = -1

          if (typeof isOpenflag === 'boolean') {
            this.isOpenflag = isOpenflag
            this.manualSwitchFnAfter(isOpenflag)
          } else {
            this.manualSwitchFnAfter(this.isOpenflag)
          }

          // 获取监控日志
          this.groupSwitchNowFn()
        })
        .catch(() => {})
    },
    // ******************      增量弹框    end    *********************************************************
    // 切换
    manualSwitchFnAfter(flag) {
      var vue = this
      this.animationIsLeft = flag
      let isLeft = ''
      // 保障方向0.主要切换保障  1.保障切主要

      if (this.animationIsLeft == 1) {
        isLeft = 'right'
      } else {
        isLeft = 'left'
      }
      // 第一次立即执行一次动画
      this.manualSwitching(isLeft, vue)
      // this.importantConfig.machineState = '3';
      // 				this.msgSuccess('开始切换');
      // 				this.clickHandle(this.NodeRow,flag)

      manualSwitch({
        id: this.id,
        flag: flag
      }).then((response) => {
        this.msgSuccess('开始切换')
        // 切换后 重置数据
        this.$refs.tipsVisible.switchRsyncDirLogData = []
        this.$refs.tipsVisible.issyncDataStatus = false
        this.$refs.tipsVisible.showDataTb = {
          dq: '待同步',
          mb: '待同步'
        }
        this.$refs.tipsVisible.issyncDataStatusLoding = 0
        this.$refs.tipsVisible.isOpenIncrementLoding = 0
        this.$refs.tipsVisible.switchRsyncDirLogStatus = -1
        this.init(this.NodeRow)
      })
    },
    showGroupLog() {
      this.groupSwitchNowVisible = true
    },
    // 切换后 日志显示
    groupSwitchNowFn() {
      var i = 0
      this.groupSwitchNowData = {
        createTime: '',
        nodeIp: '',
        message: ''
      }
      const getList = () => {
        groupSwitchNow({
          groupId: this.id
        }).then((response) => {
          // console.log(i++);
          this.groupSwitchNowList = response.data
          if (response.data[0]) {
            this.groupSwitchNowData = response.data[0]
          } else {
            this.groupSwitchNowData = {
              createTime: '',
              nodeIp: '',
              message: ''
            }
          }
        })
      }
      getList()
      if (this.groupSwitchTime) {
        clearInterval(this.groupSwitchTime)
      }

      this.groupSwitchTime = setInterval(getList, 6000)
    },

    // 关闭日志 关闭定时器
    groupSwitchNowClose() {
      // console.log('关闭日志');
      clearInterval(this.groupSwitchTime)
      this.groupSwitchNowVisible = false
    },
    // 关闭 提示框
    tipsVisibleClose() {
      this.tipsVisible = false
    },
    // 关闭定时器 关闭弹框 重置状态
    handleClose(done) {
      // 清除全量同步日志 定时器
      clearTimeout(this.$refs.tipsVisible.getIncrementLogTime)

      this.$refs.tipsVisible.getIncrementLogTime = null
      if (this.setHandleMonitorTimeout) {
        clearTimeout(this.setHandleMonitorTimeout)
      }

      this.GroupAutoSwitch.systemStatus = false
      this.$refs.tipsVisible.switchRsyncDirLogData = []
      this.$refs.tipsVisible.issyncDataStatus = false
      // 清除增量循环的 定时器
      clearTimeout(this.$refs.tipsVisible.syncDataStatusTime)

      this.$refs.tipsVisible.showDataTb = {
        dq: '待同步',
        mb: '待同步'
      }
      this.$refs.tipsVisible.issyncDataStatusLoding = 0
      this.$refs.tipsVisible.isOpenIncrementLoding = 0
      this.$refs.tipsVisible.switchRsyncDirLogStatus = -1

      // 关闭弹框 恢复定时判断
      this.isSetRoleState = false
      this.time = clearInterval(this.time)
      this.groupSwitchTime = clearInterval(this.groupSwitchTime)

      this.importantConfig = {}
      this.guaranteeConfig = {}
      this.importantConfig.nodeIp = ''
      this.importantConfig.agentStatus = 'loading'
      this.importantConfig.allServiceStatus = 'loading'
      this.importantConfig.machineState = 'loading'
      this.importantConfig.mcdcState = 'loading'
      this.importantConfig.serviceStatus = []
      this.importantConfig.nioWorkStatus = {
        delayTime: '',
        pattern: '',
        queue: ''
      }

      this.guaranteeConfig.nodeIp = ''
      this.guaranteeConfig.agentStatus = 'loading'
      this.guaranteeConfig.allServiceStatus = 'loading'
      this.guaranteeConfig.machineState = 'loading'
      this.guaranteeConfig.mcdcState = 'loading'
      this.importantConfig.splitState = 'loding'

      this.guaranteeConfig.nioWorkStatus = {
        delayTime: '',
        pattern: '',
        queue: ''
      }

      this.guaranteeConfig.splitState = 'loding'
      this.dialogVisible = false
    },
    // 重置切换状态
    czTypeFn() {
      // 关闭弹框 恢复定时判断
      this.isSetRoleState = false
      this.time = clearInterval(this.time)

      this.importantConfig.splitState = 'loding'
      this.guaranteeConfig.splitState = 'loding'

      if (this.NodeRow.securityNodeIp != this.showData.importantNodeIp) {
        this.NodeRow.importantNodeId = this.showData.securityNodeId
        this.NodeRow.importantNodeIp = this.showData.securityNodeIp
        this.NodeRow.securityNodeId = this.showData.importantNodeId
        this.NodeRow.securityNodeIp = this.showData.importantNodeIp
      } else {
        this.NodeRow.importantNodeId = this.showData.importantNodeId
        this.NodeRow.importantNodeIp = this.showData.importantNodeIp
        this.NodeRow.securityNodeId = this.showData.securityNodeId
        this.NodeRow.securityNodeIp = this.showData.securityNodeIp
      }
      // this.NodeRow.groupStatus = this.showData.groupStatus == 1 ? 2 : 1;
      this.showBdBodyTopb = false
      this.init(this.NodeRow)
    },
    // 切换保障
    handleSingOut() {
      let typeText = ''
      let systemStatus = ''
      if (this.GroupAutoSwitch.systemStatus == 1) {
        typeText = '退出保障'
        systemStatus = 0
      } else {
        typeText = '启动保障'
        systemStatus = 1
      }
      var text = ''
      console.log(this.guaranteeConfig)

      typeText += '( ' + this.NodeRow.securityName + ' )   ' + text

      this.$confirm('将' + typeText + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.loadingQdbz = this.$loading({
            lock: true,
            text: '加载中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          exitBz({
            id: this.NodeRow.id,
            systemStatus: systemStatus
          })
            .then((res) => {
              if (res.data.state == 'success') {
                // this.msgSuccess(typeText + '操作成功');
                this.GroupAutoSwitch.systemStatus = res.data.autoSwitchState
              } else if (res.data.state == 'switchingA') {
                this.$message({
                  message: '业务机切换中，禁止打开自动切换',
                  type: 'error'
                })
              } else if (res.data.state == 'switchingB') {
                this.$message({
                  message: '保障机切换中，禁止打开自动切换',
                  type: 'error'
                })
              } else if (res.data.state == 'error') {
                this.$message({
                  message: '自动切换操作失败',
                  type: 'error'
                })
              }

              this.loadingQdbz.close()
            })
            .catch(() => {
              this.loadingQdbz.close()
            })
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped>
.bdBodyTop {
  padding: 15px 40px;
  margin: 0 40px;
  border: 1px dashed #b4e8ff;
  border-radius: 10px;
}

#jcrzBox {
  border: 1px solid #f4efef;
  border-radius: 2px;
}

.bdBodyBot {
  position: relative;
}

.minH20 {
  min-height: 20px;
  margin-top: 10px;
}

.jiankDiv {
  text-align: center;
  border-radius: 4px;
  background-image: radial-gradient(#f6ffff, #ecffff, #ffffff);
}

.centSpan {
  padding: 0 10px;
}

.warBtn {
  position: absolute;
  top: 14px;
  color: red;
  left: 294px;
  z-index: 9999;
}

#zltbP {
  /* 	position: absolute;
	top: 46px; */
  left: 10px;
  color: gray;
  font-size: 12px;
}

.bdBodyTopb {
  margin-top: 10px;
  border-top: 1px solid #eaeaea;
}

.jd {
  margin: 0;
  width: 320px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.jd > div {
  width: 160px;
}
.jd .w320 {
  width: 320px;
}

.bdBodyTop .flexBox {
  display: flex;
  margin-top: 14px;
}
.flexBox2 {
  display: flex;
}

.bdBodyTop .flexBox .lable {
  width: 76px;
  text-align: right;
}

.bdBodyTop .flexBox .lable {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  text-align: right;
}

.bdBodyTop .flexBox .value {
  font-size: 14px;
  color: #666565;
  line-height: 20px;
}

.bdBodyTop .flexBox .value {
  flex: 1;
  text-align: left;
}

.bdBodyTopTc {
  flex: 1;
  text-align: center;
}

.bdBodyTopTc .lineBox {
  overflow: hidden;
  position: relative;
  height: 70px;
  width: 100%;
}

.bdBodyTopTc .line {
  display: inline-block;
  width: 200%;
  height: 20px;
  border-top: 6px dotted #abd7ff;

  margin-top: 40px;
  margin-bottom: 50px;
  position: absolute;
  left: 0%;
}

.bdBodyTopTc .leftLine {
  border: 0;
  background: url(../../../../assets/icons/jiantou.png);
  background-size: auto 100%;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.bdBodyTopTc .rightLine {
  border: 0;
  background: url(../../../../assets/icons/jiantou.png);
  background-size: auto 100%;
}

.zyNode p,
.bzNode p {
  margin-top: 8px;
  text-align: center;
}

.mar40 {
  margin: 10px 40px;
}

.mar40 .bdBodyTop {
  margin: 0;
}

.bdBodyTopTuBox {
  display: flex;
  justify-content: space-between;
}

.bdBodyTopTuC {
  width: 10px;
}

.bdBodyTopTu {
  padding: 20px 20px;
  flex: 1;
  border: 1px dashed #b4e8ff;
  border-radius: 10px;
  width: 50%;
  min-height: 100px;
}

.el-tab-pane {
  min-height: 120px;
}

.bdBodyTopTu .title {
  padding-top: 0;
  margin-top: 0;
}

.elFormTxtL {
  text-align: left;
}

.titleParame {
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

#jianceBtn {
  color: #67c23a;
  position: absolute;
  top: 24px;
  left: 100px;
}

.setRoleStateBtn {
  text-align: right;
  margin-right: 80px;
  margin-top: 20px;
}

#nlzt {
  position: absolute;
  right: 40px;
  top: 381px;
}

.flexBox {
  display: flex;
  justify-content: space-between;
}

.flexBox img {
  width: 100px;
}

.bdBodyTop {
  padding: 15px 40px;
  margin: 0 40px;
  border: 1px dashed #b4e8ff;
}

.bdBodyTopb {
  margin-top: 20px;
  border-top: 1px solid #eaeaea;
}

.bdBodyTop .flexBox {
  display: flex;
  margin-top: 20px;
}

.bdBodyTop .flexBox .value {
  font-size: 14px;
  color: #666565;
  line-height: 20px;
}

.bdBodyTop .flexBox .value {
  flex: 1;
  text-align: left;
  min-width: 86px;
}

.bdBodyTopTc {
  flex: 1;
  text-align: center;
}

.bdBodyTopTc .lineBox {
  overflow: hidden;
  position: relative;
  height: 70px;
  width: 100%;
}

.bdBodyTopTuBox {
  display: flex;
  justify-content: space-between;
}

.bdBodyTopTuC {
  width: 10px;
}

.bdBodyTopTu {
  padding: 20px 20px;
  flex: 1;
  border: 1px dashed #b4e8ff;
  width: 50%;
}

.bdBodyTopTu .title {
  padding-top: 0;
  margin-top: 0;
}

.flexBox .itemBtn {
  width: 25px;
  cursor: pointer;
}

.jktab {
  text-align: center;
}

.jktab tr th {
  word-break: break-word;
  background-color: #f8f8f9;
  color: #515a6e;
  height: 40px;
  font-size: 13px;
}

.jktab tr td {
  padding: 10px 00;
}

.candlestick {
  width: 650px;
  height: 360px;
  position: absolute;
  top: -20px;
  right: 0px;
}

#defultBox {
  background: #ffffff;
  text-align: center;
  height: 200px;
}

#defultBox p {
  margin-top: 110px;
  color: gray;
}

.bdBodyBot .defultBox {
  height: 174px;
}

#echarsType {
  position: absolute;
  top: 0px;
  left: 210px;
  z-index: 999;
}

#echarsType .el-tag {
  cursor: pointer;
  margin-right: 5px;
}

.jktab .el-tag {
  cursor: pointer;
}

.h400 {
  height: 344px;
}

.tipInfo {
  color: #a09e9e;
  margin-top: -10px;
}

.boxTitleP {
  margin-top: 15px;
  color: gray;
}

.h250pxBox {
  margin-top: 5px;
  border: 1px solid #e8e7e7;
  border-radius: 2px;
}

.centerbox {
  padding: 10px;
}

.centerbox div {
  padding: 5px;
}

.nullLog {
  text-align: center;
  margin-top: 50px;
  color: #a09e9e;
}

.h250px {
  height: 250px;
}

.leftBox,
.rightBox {
  flex: 1;
}

.leftBox {
  border-right: 1px solid #e4e4e4;
}

.flotR {
  float: right;
}

.tbrzlog {
  color: #606266;
  padding: 4px 0;
}

.margL15 {
  margin-left: 15px;
  display: inline-block;
}

.margL50 {
  margin-left: 50px;
}

.switchBox {
  margin-left: -30px;
  padding: 10px;
  text-align: center;
  position: relative;
}

.switchBox .bigBtn {
  display: block;
  height: 60px;
  width: 60px;
  margin: 0 auto;
  margin-bottom: 10px;
  position: relative;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 1px 2px 3px #c9c9c9;
  transition: all 0.4s;
}

.switchBox .bigBtn:hover {
  box-shadow: 1px 1px 6px grey;
}

.onBtn {
  background-color: #4ecc8d;
}

.offBtn {
  background-color: #c8c9cc;
}

.coverSwitch {
  display: block;
  height: 32px;
  width: 32px;
  background-size: cover;
  position: absolute;
  left: 14px;
  top: 14px;
  background-image: url(../../../../assets/icons/bzxz.png);
}

.switchBox p {
  margin: 6px;
  color: #878787;
}

.mtBtn,
.tbBtn {
  position: absolute;
  right: 32px;
  top: 50px;
}

.infoBtn {
  margin: 16px;
}

.infoBtn2 {
  margin: 0 4px;
}
</style>
<style>
#disabledCheckbox span {
  color: #1890ff;
}

#disabledCheckbox
  .el-checkbox__input.is-disabled.is-checked
  .el-checkbox__inner::after {
  border-color: #1890ff;
}
</style>
